<template>
  <view class="tab-bar">
    <view class="tab-bar-border"></view>
    <block v-for="(item, index) in data.list" :key="item.pagePath">
      <!-- 非中间按钮处理 -->
      <view v-if="item.text !== data.centerBtnName" class="tab-bar-item" @click="() => switchTab(index)">
        <image :src="data.selected === index ? item.selectedIconPath : item.iconPath"></image>
        <view :style="{ color: data.selected === index ? data.selectedColor : data.color }">{{ item.text }}</view>
      </view>
      <!-- 中间按钮处理 -->
      <view v-else class="tab-bar-center-wrap">
        <!-- 中间按钮 -->
        <view
          class="tab-bar-center"
          :style="{ marginTop: platform !== 'ios' ? '-130rpx' : '-64rpx' }"
          @click="() => switchTab(index)">
          <image class="tab-bar-center-image" :src="item.iconPath" mode="widthFix"></image>
        </view>
        <!-- 文本 -->
        <view class="tab-bar-center-text" :style="{ color: data.selected === index ? data.selectedColor : data.color }">
          {{ item.text }}
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { reactive } from 'vue';
const { platform } = uni.getSystemInfoSync();

const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
});
const data = reactive({
  platform, // 客户端平台
  selected: 0, // 当前选中项索引
  centerBtnName: 'AI测评', // 中间按钮名称
  color: '#CAD4D2', // 【未激活】按钮文本颜色
  selectedColor: '#FEFFFF', // 【激活】按钮文本颜色
  list: [
    {
      pagePath: '/pages/index/index',
      iconPath: 'https://cdn.xmxiaomai.com/isong_static/common/index_un.png',
      selectedIconPath: 'https://cdn.xmxiaomai.com/isong_static/common/index.png',
      text: '首页',
    },
    {
      pagePath: '/pages/square/index',
      iconPath: 'https://cdn.xmxiaomai.com/isong_static/common/square_un.png',
      selectedIconPath: 'https://cdn.xmxiaomai.com/isong_static/common/square.png',
      text: '广场',
    },
    {
      pagePath: '/pages/evaluation/index',
      iconPath: 'https://cdn.xmxiaomai.com/isong_static/common/evaluation.png',
      // selectedIconPath: '/static/images/home.png',
      text: 'AI测评',
    },
    {
      pagePath: '/pages/mv/index',
      iconPath: 'https://cdn.xmxiaomai.com/isong_static/common/mv_un.png',
      selectedIconPath: 'https://cdn.xmxiaomai.com/isong_static/common/mv.png',
      text: 'MV',
    },
    {
      pagePath: '/pages/my/index',
      iconPath: 'https://cdn.xmxiaomai.com/isong_static/common/my_un.png',
      selectedIconPath: 'https://cdn.xmxiaomai.com/isong_static/common/my.png',
      text: '我的',
    },
  ],
});

const switchTab = (index: number) => {
  const item = data.list[index];
  const url = item.pagePath;
  uni.switchTab({ url });
  data.selected = index;
};

onShow(() => {
  data.selected = props.current;
});
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #1c443b;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 98;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  z-index: -1;
}

.tab-bar-center-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-bar-center {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  background: white;
  margin-top: -64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .tab-bar-center-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.tab-bar-center-text {
  margin-bottom: -64rpx;
  font-size: 24rpx;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 27px;
  height: 27px;
}

.tab-bar-item view {
  font-size: 24rpx;
}
</style>
